import React, {Component} from 'react';
import GridLayout from 'react-grid-layout';
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
import './App2.css';

class MyFirstGrid extends React.Component {
    componentDidMount() {
        this.viewer = new Viewer(this.cesiumContainer);
    }
    render() {
        var layout = [
            {i: 'a', x: 0, y: 0, w: 1, h: 2,},
            {i: 'b', x: 1, y: 0, w: 8, h: 6, minW: 8, maxW: 8},
            {i: 'd', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
            {i: 'f', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
            {i: 'g', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
            {i: 'c', x: 4, y: 0, w: 1, h: 2}
        ];
        return (
            <GridLayout className="layout" layout={layout} cols={12} rowHeight={60} width={1200}>
                <div key="b" style={{border: '1px solid #96c2f1',background:'#eff7ff'}}>
                    <div id="cesiumContainer" ref={ element => this.cesiumContainer = element }/>
                </div>
                <div key="c" style={{border: '3px solid' ,color:"blue",background:'#eff7ff'}}>c</div>
                <div key="d" style={{border: '1px solid #96c2f1',background:'#eff7ff'}}>d</div>
                <div key="a" style={{border: '1px solid #96c2f1',background:'#eff7ff'}}>d</div>
                <div key="f" style={{border: '1px solid #96c2f1',background:'#eff7ff'}}>GoLind</div>
                <div key="g" style={{border: '1px solid #96c2f1',background:'#eff7ff'}}>测试</div>
            </GridLayout>
        )
    }
}

export default MyFirstGrid;